<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="22">
            <el-form :inline="true" :model="input">
              <el-form-item label="学科名称">
                <el-input v-model="input"></el-input>
              </el-form-item>
              <el-button @click="hClear">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form>
         </el-col>
         <el-col :span="2">
            <el-button type="success" icon="el-icon-edit"  @click="hAdd">新增学科</el-button>
         </el-col>
        </el-row>
        <el-alert style="margin-bottom:15px" type="info" show-icon :closable="false">数据一共{{total}}条</el-alert>
         <!-- 表格 -->
        <el-table style="width:100%" :data="tableData" >
          <el-table-column
           type="index"
           label="序号"
           :index="(index)=>{return (index+1) + (page-1)*pagesize }"
            >
          </el-table-column>
          <el-table-column  property="subjectName" label="学科名称" >
          </el-table-column>
          <el-table-column property="username"  label="创建者" >
          </el-table-column>
          <el-table-column property="addDate" label="创建日期">
            <template slot-scope="scope">
              {{parseTime(scope.row.addDate)}}
            </template>
          </el-table-column>
           <el-table-column  property="isFrontDisplay" label="前台是否显示" >
             <template slot-scope="scope">
               {{(scope.row.isFrontDisplay)?'是':'否'}}
             </template>
          </el-table-column>
          <el-table-column property="twoLevelDirectory" label="二级目录" >
          </el-table-column>
          <el-table-column property="tags"  label="标签">
          </el-table-column>
            <el-table-column  property="totals"  label="题目数量" >
          </el-table-column>
          <el-table-column  width="240" label="操作">
            <template slot-scope="scope">
            <el-button type="text" @click="$router.push(`/subjects/directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="hAlter(scope.row)">修改</el-button>
            <el-button type="text" @click="hDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
       </el-table>
       <!-- 分页 -->
      <el-pagination
        background
        :page-sizes="[5, 10, 20, 50]"
        layout="prev, pager,next,sizes,jumper"
        :total="total"
        :page-size="pagesize"
        @size-change="hSizeChange"
        @current-change="hCurrentChange"
        :current-page="page"
        />
      </el-card>
     </div>
     <!-- 新增弹框 -->
     <el-dialog  :visible.sync="showDialog" @close='close' width="30%" :title="this.isEdit ? '新增学科' : '编辑学科'" :close-on-click-modal="false" :close-on-press-escape="false">
       <!-- 表单内容 -->
       <el-form ref="roleForm" :model="roleForm" :rules="rules">
         <el-form-item label="学科名称"  prop="subjectName">
           <el-input style="width:70%" placeholder="请输入学科名称"  v-model="roleForm.subjectName"  />
         </el-form-item>
         <el-form-item label="是否显示">
             <el-switch
               v-model="roleForm.isFrontDisplay"
               active-color="#13ce66"
               inactive-color="#ff4949"
               :active-value="1"
               :inactive-value="0"
             />
         </el-form-item>
       </el-form>
       <template >
         <div style="text-align: right;">
           <el-button @click="showDialog = false">取消</el-button>
           <el-button type="primary" @click="hSave">确定</el-button>
         </div>
       </template>
    </el-dialog>
   </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects'
import { parseTime } from '../../utils/index'
export default {
  name: 'subjects',
  data () {
    return {
      input: '', // 搜索表单
      tableData: [], // 所有数据
      page: 1, // 当前页码
      pagesize: 10, // 每页几条
      total: 0, // 全部条数
      showDialog: false, // 弹层
      isEdit: false, // 是否是编辑
      curId: '', // 当前Id
      roleForm: {
        subjectName: '', // 名称
        isFrontDisplay: '0' // 开启
      },
      nowSubjectName: '',
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.loadSubject()
  },
  methods: {
    // 日期格式化
    parseTime (res) {
      return parseTime(res)
    },
    // 关闭弹层清空表单
    close () {
      this.roleForm.subjectName = ''
    },
    // 用户点击了页码
    hCurrentChange (page) {
      // 1. 更新页码
      this.page = page
      // 2. 重发请求
      this.loadSubject()
    },
    // 每页几条
    hSizeChange (curSize) {
      // 1. 更新每页的条数
      this.pagesize = curSize
      // 2.回到第一页
      this.page = 1
      // 3. 重发请求
      this.loadSubject()
    },
    // 获取学科列表
    async loadSubject () {
      try {
        const res = await list({ subjectName: this.input, page: this.page, pagesize: this.pagesize })
        console.log('获取学科列表', res)
        this.tableData = res.data.items// 保存数据
        this.total = res.data.counts// 所有条数
      } catch (err) {
        console.log(err)
      }
    },
    async doAdd () {
      try {
        const res = await add(this.roleForm)
        console.log(res)
        this.$message.success('添加成功')
        // 1.重发请求
        this.loadSubject()
        // 2.关闭弹窗
        this.showDialog = false
      } catch (err) {
        this.$message.error('添加失败')
        console.log(err)
      }
    },
    // 用户点击添加
    hAdd () {
      this.showDialog = true
      this.isEdit = true
      this.page = 1
    },
    // 用户点击了保存
    hSave () {
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          // 判断是添加的还是保存编辑的保存
          this.isEdit ? this.doAdd() : this.doEdit()
        }
      })
    },
    // 用户点击删除
    hDel (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(id)
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除的请求
    async doDelete (data) {
      try {
        const res = await remove(data)
        console.log(res)
        // 1. 提示
        this.$message.success('删除成功')
        // 2. 重新请求页面
        this.loadSubject()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 用户点击修改
    hAlter (row) {
      // 1. 把当前的数据直接给表单
      this.roleForm.subjectName = row.subjectName
      // 2.是否显示按钮数据回填
      this.$nextTick(() => {
        this.roleForm.isFrontDisplay = row.isFrontDisplay
      })
      // 3. 显示弹层
      this.showDialog = true
      // 4.保存一下当前id
      this.curId = row.id
      console.log(this.curId)
      this.isEdit = false
    },
    // 发送修改的请求
    async doEdit () {
      try {
        const res = await update({ id: this.curId, ...this.roleForm })
        console.log(res)
        this.loadSubject()
        this.$message.success('编辑成功')
        this.showDialog = false
      } catch (err) {
        this.$message.error('编辑失败')
        console.log(err)
      }
    },
    // 用户点击清除
    hClear () {
      this.input = ''
      this.page = 1
      this.loadSubject()
    },
    // 用户点击搜索
    onSubmit () {
      this.page = 1
      this.loadSubject()
    }

  }
}
</script>
<style scoped>
.el-pagination{
float:right
}
</style>
